.popoverOne {
    :deep(.van-popover__arrow) {
        color: #333340 !important;
    }

    :deep(.van-popover__action) {
        width: 120px !important;
        background-color: #333340 !important;
    }
}

.open-header {
    width: 100%;

    .header-main {
        width: 100%;
        overflow-x: scroll;
        box-sizing: border-box;
        padding: 10px 0;
        white-space: nowrap;
        font-size: 0;
        padding-right: 10px;

        /* 禁止换行 */
        &::-webkit-scrollbar {
            width: 0 !important;
            height: 1px;
        }

        &-item {
            display: inline-block;
            box-sizing: border-box;
            background: #2b2b33;
            border-radius: 4px;
            height: 30px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 30px;
            text-align: center;
            margin-left: 10px;
        }

        &-all {
            width: 60px;
            color: #ffffff;
            margin-left: 10px;

            &.active {
                color: #ffeecc;
                background: #3d3d4c;
            }
        }

        &-idle {
            width: 80px;
            color: #009900;

            &.active {
                color: #ffffff;
                background-color: #009900;
            }
        }

        &-use {
            width: 80px;
            color: #ffaa00;

            &.active {
                color: #ffffff;
                background-color: #ffaa00;
            }
        }

        &-pre {
            width: 80px;
            color: #00aacc;

            &.active {
                color: #ffffff;
                background-color: #00aacc;
            }
        }

        &-unpaid {
            width: 80px;
            color: #ff3333;

            &.active {
                color: #ffffff;
                background-color: #ff3333;
            }
        }

        &-repair {
            width: 80px;
            color: #999999;

            &.active {
                color: #ffffff;
                background-color: #999999;
            }
        }

        &-lock {
            width: 80px;
            color: #998AE6;

            &.active {
                color: #ffffff;
                background-color: #998AE6;
            }
        }
    }

    .header-footer {
        width: 100%;
        position: relative;
        font-size: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-select {
            font-size: 14px;
            height: 34px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 34px;
            margin-left: 12px;
            overflow: hidden;
            padding-right: 13px;
            position: relative;
        }

        &-icon {
            width: 10px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-image: url('@/assets/svg/open/v_open_triangle.svg');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 10px 6px;
        }

        &-option {
            width: 120px;
            height: 150px;
            margin-left: 10px;
            position: relative;
            z-index: 3000;
            // border: 1px dashed #58585a;

            li {
                list-style: none;
                height: 50px;
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #fefefe;
                line-height: 50px;
                text-align: center;
            }

            div {
                width: 80px;
                height: 1px;
                margin: 0 auto;
                background: #41414d;
            }
        }
    }
}

.open-container {
    height: 100%;
    width: 100%;
    // background: #17171a;
    overflow: hidden;

    .open-main {
        display: flex;
        padding-top: 10px;
        overflow: hidden;
        height: 100%;

        .main-right {
            flex: 1;
            height: 100%;
            overflow-y: auto;
            /* 在屏幕宽度大于或等于 700px 时显示元素 */
            @media (min-width: 700px) {
                .right-main {
                 justify-content: start !important;
                 gap: 0 11px;
                }
            }
            .right-main {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                padding: 0px 6px;

                .card {
                    width: 138px;
                    height: 260px;
                    background: #28282e;
                    border-radius: 8px;
                    margin-bottom: 8px;
                    padding: 7px 8px 12px 8px;
                    position: relative;

                    &.free {
                        .card-top-name {
                            color: #009900;

                            &.spe {
                                color: #999999;
                            }

                            &.lock {
                                color: #998AE6;
                            }
                        }

                        .card-top-state {
                            background: #009900;

                            &.spe {
                                background: #999999;
                            }

                            &.lock {
                                background: #998AE6;
                            }
                        }

                        .card-content {
                            padding-top: 12px;
                        }
                    }

                    &.book {
                        .card-top-name {
                            color: #00aacc;
                        }

                        .card-top-state {
                            background: #00aacc;
                        }

                        .card-content {
                            padding-top: 6px;
                        }
                    }

                    &.use {
                        .card-top-name {
                            color: #ffaa00;
                        }

                        .card-top-state {
                            background: #ffaa00;
                        }

                        .card-content {
                            padding-top: 6px;
                        }
                    }

                    &.unpay {
                        .card-top-name {
                            color: #c00000;
                        }

                        .card-top-state {
                            background: #c00000;
                        }

                        .card-content {
                            padding-top: 6px;
                        }
                    }

                    &.cardActive {
                        border: 1px solid #bf9f60;
                    }

                    .card-top {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        &-name {
                            // width: 41px;
                            // height: 14px;
                            font-size: 18px;
                            font-family: PingFang SC;
                            font-weight: bold;
                            color: #ffaa00;
                            line-height: 18px;

                        }

                        &-state {
                            padding: 4px 8px 5px 8px;
                            border-radius: 2px;
                            font-size: 12px;
                            font-family: PingFang SC;
                            font-weight: 500;
                            color: #ffffff;
                            line-height: 12px;
                        }
                    }

                    &-main {

                        &-item {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            position: relative;
                            padding-top: 8px;

                            .card-item-label {
                                font-size: 13px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                line-height: 13px;
                                color: #cccccc;
                            }

                            .card-item-li {
                                font-size: 13px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                line-height: 1px;
                                color: #ffffff;
                                text-align: right;
                            }

                            // .card-item-time {
                            //     transform: translateY(-5px);
                            // }

                            .card-item-date {
                                transform: scale(0.75);
                                font-size: 12px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                line-height: 20px;
                                color: #cccccc;
                                transform-origin: right;
                                margin-top: -2px;
                                margin-right: -1px;
                            }

                            .preTime {
                                position: absolute;
                                list-style: none;
                                top: 10px;
                                left: 44px;
                                width: 72px;
                                transform: scale(0.75);
                                font-size: 12px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                line-height: 20px;
                                color: #cccccc;
                                // text-align: right;
                                margin-left: 20px;
                                transform-origin: left;
                            }
                        }
                    }

                    &-content {
                        // margin-bottom: 5px;

                        &-item {
                            display: flex;
                            justify-content: space-between;
                            padding-top: 8px;

                            .card-content-label {
                                font-size: 12px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                                line-height: 12px;
                                white-space: nowrap;
                            }

                            .card-item-li {
                                list-style: none;
                                font-size: 12px;
                                font-family: PingFang SC;
                                font-weight: 500;
                                color: #999999;
                                line-height: 12px;
                                text-align: right;
                            }
                        }
                    }

                    &-footer {
                        width: 122px;
                        height: 20px;
                        margin: 0 auto;
                        background: #45454d; 
                        border-radius: 2px;
                        overflow: hidden;
                        font-size: 12px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 20px;
                        padding-left: 8px;
                        padding-right: 8px;
                        white-space: nowrap;
                        /* 强制文本在一行显示 */
                        text-overflow: ellipsis;
                        /* 超出容器宽度部分显示省略号 */
                        background-image: url('@/assets/svg/open/v_open_triangle2.svg');
                        background-repeat: no-repeat;
                        background-position: 114px center;
                        background-size: 4px 7px;
                        margin-top: 8px;
                    }

                    &-lock {
                        position: absolute;
                        bottom: 8px;
                        right: 8px;
                        width: 20px;
                        height: 20px;
                        background-image: url('@/assets/images/open/i_card_lock.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100%;
                    }
                    &-turn {
                        position: absolute;
                        bottom: 8px;
                        right: 8px;
                        width: 20px;
                        height: 20px;
                        background-image: url('@/assets/images/open/i_card_turn.png');
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size: 100%;
                    }

                    &-pre {
                        // position: absolute;
                        bottom: 8px;
                        right: 8px;
                        // height: 20px;
                        // width: 45px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 12px;
                        color: #FFAA00;
                        text-align: right;
                    }

                }
            }
        }

        // 去除滚动条
        .right::-webkit-scrollbar {
            width: 0 !important;
        }
    }

    .notes-title {
        padding: 20px 0px 18px;
        text-align: center;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 15px;
    }

    .notes-content {
        padding: 0 22px 23px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 24px;
    }

    .popup-use-title {
        width: 100%;
        height: 52px;
        position: relative;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #fefefe;
        line-height: 52px;
        border-radius: 24px 24px 0px 0px;
    }

}

.popup-remark {
    &-title {
        padding: 20px 0px 18px;
        text-align: center;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 15px;
    }

    &-content {
        // width: 200px;
        word-wrap: break-word;
        padding: 0 22px 23px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 24px;
    }
}

.popup-panel {
    text-align: center;
    padding: 20px 12px 10px;

    .popup-idle {
        .popup-idle-maintenance {
            position: absolute;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffaa00;
            line-height: 18px;
            top: 20px;
            left: 16px;
        }

        .popup-idle-main { 
            width: 100%;
            height: calc(100% - 55px);
            display: flex;

            .idle-main-left {
                width: calc(34% - 6px) ;
                .main-left-item {
                    // width: 111px;
                    width: 100%;
                    height: 40px;
                    background: #575766;
                    border-radius: 4px;
                    font-size: 15px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    line-height: 40px;
                    margin-bottom: 10px;
                }
            }

            .idle-main-right {
                width: calc(33% - 6px) ;
                .main-right-item {
                    // width: 111px;
                    width: 100%;
                    height: 40px;
                    background: #575766;
                    border-radius: 4px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 15px;
                    color: #FFFFFF;
                    line-height: 40px;
                    margin-bottom: 10px;
                    // margin-left: 9px;
                    margin-left: 9px;

                    &.spe {
                        color: #FF3333;
                    }
                }

                .main-right-spe {
                    width: 100%;
                    // width: 111px;
                    height: 90px;
                    background: #575766;
                    border-radius: 4px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24px;
                    color: #FFAA00;
                    line-height: 90px;
                    margin-left: 18px;
                }
            }
        }
    }

    .pre-main {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #ffffff;
        height: calc(100% - 55px);
        display: flex;
        margin-left: -9px;

        .pre-main-left {
            width: 66%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .pre-main-records {
                // width: 111px;
                width: calc(50% - 9px);
                padding: 13px 0px 13px 0px;
                background: #575766;
                margin: 0 0 10px 9px;
                border-radius: 4px;
            }

            // .pre-main-certificate {
            //     width: 111px; 
            //     padding: 13px 0px;
            //     margin: 0 0 10px 9px;
            //     background: #575766;
            //     border-radius: 4px;
            // }

            .pre-main-item {
                background: #575766;
                border-radius: 4px;
                // width: 111px;
                width: calc(50% - 9px);
                padding: 13px 0px 13px 0px;
                margin-left: 9px;
                margin-bottom: 10px;
            }

        }

        .pre-main-right { 
            width: calc(34%  - 9px );
            margin-left: 9px;

            .main-middle-right {
                // width: 111px;
                width: 100%;
                height: 90px;
                background: #575766;
                border-radius: 4px;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24px;
                color: #FFAA00;
                line-height: 90px; 
                margin-bottom: 10px;

                &.spe {
                    color: #FFAA00;
                }
            }
        }



    }

    .popup-use {
        text-align: center;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #ffffff;
        margin-left: -9px;
        // background-color: red;

        .popup-use-main {
            height: calc(100% - 55px);
            display: flex;

            .use-main-left { 
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                width: 66%;

                .main-item-records {
                    // width: 111px;
                    width: calc(50% - 9px);
                    padding: 13px 0px 13px 0px;
                    background: #575766;
                    margin: 0 0 10px 9px;
                    border-radius: 4px;
                }

                .main-item-certificate {
                    // width: 111px;
                    width: calc(50% - 9px);
                    padding: 13px 0px;
                    margin: 0 0 10px 9px;
                    background: #575766;
                    border-radius: 4px;
                }

                .use-main-item {
                    background: #575766;
                    border-radius: 4px; 
                    width: calc(50% - 9px);
                    padding: 13px 0px 13px 0px;
                    margin-left: 9px;
                    margin-bottom: 10px; 
                }  

            }

            .use-main-right {
                // flex-basis: 33.33%;
                margin-left: 9px;
                width: calc(34% - 9px);

                .main-item-order {
                    // width: 111px;
                    width: 100%;
                    padding: 38px 0;
                    background: #575766;
                    border-radius: 4px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 24px;
                    color: #FFAA00;
                    margin: 0 0 10px 0;
                }
            }
        }

       

        .popup-use-footer {
            display: flex;
            justify-content: space-between;
        }  

        .use-main-item-left {
            background: #575766;
            border-radius: 4px; 
            width: calc(33% - 9px);
            padding: 13px 0px 13px 0px;
            margin-left: 9px;
            margin-bottom: 10px; 
        }
        .use-main-item-right {
            background: #575766;
            border-radius: 4px; 
            width: calc(34% - 9px);
            padding: 13px 0px 13px 0px;
            margin-left: 9px;
            margin-bottom: 10px;

            &.spe {
                color: #00FF80;
            }
        }
    }
}

.open-bubble-popover {

    :deep(.van-popover__arrow) {
        color: #333340;
    }

    :deep(.van-popover__content) {
        background-color: #333340;
        font-size: 16px;
        color: #FFFFFF;
        width: 120px;
    }

    :deep(.van-popover__action) {
        height: 47px;
        padding: 0 20px;
        width: 100%;
    }

    :deep(.van-hairline--bottom) {
        border-top: 1px solid #434359;

        &:after {
            border-bottom: 0;
        }
    }

    :deep(.van-popover__action):first-child {

        .van-hairline--bottom {
            border-top: 0;
        }
    }
}

.popup-cancel {
    padding: 12px 20px 20px 20px;

    .cancelPre-main {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #505059;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 16px;

        .cancelPre-main-left {
            color: #cccccc;
            padding: 14px 0 17px 0px;
        }

        .cancelPre-main-right {
            color: #cccccc;
            margin-left: 12px;
            overflow: hidden;
            position: relative;
            padding: 14px 17px 17px 0;

            .cancelPre-right-icon {
                width: 10px;
                height: 100%;
                position: absolute;
                right: 0px;
                top: 0px;
                background-image: url('@/assets/svg/confirm/v_confirm-triangle.svg');
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 10px 6px;
            }

        }
    }

    // 取消预订的备注居右
    :deep(.van-field__control) {
        text-align: right;
        color: #cccccc;
    }

    // 取消预订的备注外边距
    :deep(.van-cell) {
        width: auto;
    }

    // 取消预订备注背景
    :deep(.van-field) {
        background: #45454d;
        border: none;
        padding: 17px 0px 17px 0px;
        border-bottom: 1px solid #505059;
    }

    :deep(.van-field__label) {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        line-height: 16px;
    }

    :deep(.van-cell:after) {
        border-bottom: 0;
    }
}

.header-main-all {
    position: fixed;
    top: 45px;
    right: 0px;
    height: 45px !important;
    line-height: 45px !important;
    background: url('https://oss.jtmckj.com/Supply/Material/header-main-all.png') no-repeat !important;
    background-size: 100% 100% !important;
    color: #CCCCCC !important;
}
.header-main-lock {
    margin-right: 80px;
}
.line-break {
    display: block; /* 使用block使得内容换行 */
    height: 0; /* 设置高度为0，避免影响布局 */
}
// .ly-spe{
//     line-height: 18px;
// }